<template>
  <div class="layout-container">
    <el-container>
      <el-header class="header">
        <div class="header-left">
          <div class="logo">
            <span class="logo-icon">✂️</span>
            <span class="logo-text">剪纸后台管理</span>
          </div>
        </div>
        <div class="header-right">
          <div class="user-info">
            <el-dropdown @command="handleUserCommand">
              <span class="el-dropdown-link">
                <el-avatar :size="32" icon="User" class="user-avatar" />
                <span class="username">{{ userInfo.nickname || '管理员' }}</span>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    <el-icon><User /></el-icon>
                    个人资料
                  </el-dropdown-item>
                  <el-dropdown-item command="settings">
                    <el-icon><Setting /></el-icon>
                    系统设置
                  </el-dropdown-item>
                  <el-dropdown-item divided command="logout">
                    <el-icon><SwitchButton /></el-icon>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      
      <el-container>
        <el-aside width="220px" class="sidebar">
          <el-menu
            :default-active="activeMenu"
            class="sidebar-menu"
            router
            :collapse="isCollapse"
          >
            <el-menu-item index="/">
              <el-icon><House /></el-icon>
              <template #title>首页</template>
            </el-menu-item>
            
            <el-sub-menu index="content">
              <template #title>
                <el-icon><Management /></el-icon>
                <span>内容管理</span>
              </template>
              <el-menu-item index="/culture">剪纸文化</el-menu-item>
              <el-menu-item index="/tutorials">教程管理</el-menu-item>
              <el-menu-item index="/news">活动资讯</el-menu-item>
            </el-sub-menu>
            
            <el-sub-menu index="user">
              <template #title>
                <el-icon><User /></el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/users">用户列表</el-menu-item>
              <el-menu-item index="/statistics">数据统计</el-menu-item>
            </el-sub-menu>
            
            <el-sub-menu index="system">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="/review">内容审核</el-menu-item>
              <el-menu-item index="/settings">系统设置</el-menu-item>
              <el-menu-item index="/logs">系统日志</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        
        <el-container>
          <el-main class="main-content">
            <router-view />
          </el-main>
          
          <el-footer class="footer">
            <div class="footer-content">
              <p>© 2025 中国剪纸文化展示平台 - 传承中华文化，弘扬民族艺术</p>
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  House, 
  Management, 
  Document, 
  User, 
  Promotion, 
  DataAnalysis, 
  Setting,
  Edit,
  Tickets,
  ArrowDown,
  SwitchButton
} from '@element-plus/icons-vue'

export default {
  name: 'Layout',
  components: {
    House,
    Management,
    Document,
    User,
    Promotion,
    DataAnalysis,
    Setting,
    Edit,
    Tickets,
    ArrowDown,
    SwitchButton
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const activeMenu = ref(route.path)
    const isCollapse = ref(false)
    const userInfo = ref({})
    
    // 监听路由变化，更新激活菜单
    watch(route, () => {
      activeMenu.value = route.path
    })
    
    // 获取用户信息
    const getUserInfo = () => {
      const userInfoStr = localStorage.getItem('userInfo')
      if (userInfoStr) {
        userInfo.value = JSON.parse(userInfoStr)
      }
    }
    
    // 处理用户下拉菜单命令
    const handleUserCommand = (command) => {
      switch (command) {
        case 'profile':
          ElMessage.info('个人资料功能待开发')
          break
        case 'settings':
          router.push('/settings')
          break
        case 'logout':
          ElMessageBox.confirm('确定要退出登录吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 清除本地存储的token和用户信息
            localStorage.removeItem('token')
            localStorage.removeItem('userInfo')
            // 跳转到登录页
            router.push('/login')
            ElMessage.success('已退出登录')
          }).catch(() => {
            // 用户取消退出
          })
          break
      }
    }
    
    // 组件挂载时获取用户信息
    onMounted(() => {
      getUserInfo()
    })
    
    return {
      activeMenu,
      isCollapse,
      userInfo,
      handleUserCommand
    }
  }
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.header {
  background: linear-gradient(135deg, #8B0000 0%, #DC143C 100%);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
  position: relative;
  overflow: hidden;
}

.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 20%);
  pointer-events: none;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-icon {
  font-size: 24px;
  margin-right: 10px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  margin-right: 10px;
  background-color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.username {
  margin-right: 5px;
  font-weight: 500;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: white;
}

.sidebar {
  background-color: #f8f9fa;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 99;
  position: relative;
}

.sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(90deg, rgba(139, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(139, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.sidebar-menu {
  border-right: none;
  height: calc(100vh - 60px);
  overflow-y: auto;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 220px;
}

.main-content {
  background-color: #f5f5f5;
  padding: 20px;
  overflow-y: auto;
  position: relative;
}

.main-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(139, 0, 0, 0.02) 0%, transparent 15%),
    radial-gradient(circle at 90% 80%, rgba(139, 0, 0, 0.02) 0%, transparent 15%);
  pointer-events: none;
}

.footer {
  background-color: white;
  border-top: 1px solid #eee;
  padding: 0;
}

.footer-content {
  text-align: center;
  padding: 15px;
  color: #666;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 60px;
  }
  
  .sidebar-menu:not(.el-menu--collapse) {
    width: 60px;
  }
  
  .logo-text {
    display: none;
  }
  
  .username {
    display: none;
  }
  
  .header {
    padding: 0 10px;
  }
  
  .main-content {
    padding: 10px;
  }
}
</style>